<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive} from "vue";
import bottom from '../Bottom/Bottom.vue'
import left from '../Top/Left.vue'
import center from '../Top/Center.vue'
import right from '../Top/Right.vue'

const air_data: any = reactive([])
const hum_data: any = reactive([])
function getData() {
  axios.get("/api/Air/Pollution").then((response) => {
    air_data.value = response.data
    // console.log(age_data)
  });
}

const air_chart_data = computed(() => {
  return air_data.value;
});

function getData2() {
  axios.get("/api/Air/Hum").then((response) => {
    hum_data.value = response.data
     // console.log(hum_data)
  });
}
const hum_chart_data = computed(() => {
  return hum_data.value;
});

onMounted(() => {
  getData()
})
onMounted(() => {
  getData2()
})
</script>

<template>
  <!-- 第一行 -->
  <div class="whl-row">
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>20~30℃时空气状况分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <left :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>北上广空气含量分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <center :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>不同湿度下的空气成分含量</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <right :chart_option="hum_chart_data" v-if="hum_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
  </div>
  <!-- 第二行 年龄段患病比例 -->
<!--  <div class="whl-row">-->
    <div class="whl-col ccooll" >
      <div class="count-base">
        <div class="com-count-title"><h1>不同温度下的空气质量</h1></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <bottom :chart_option="air_chart_data" v-if="air_data.value"/>
<!--            <Habit :chart_option="hum_chart_data" v-if="hum_data.value"/>-->
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
<!--  </div>-->


</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";

.ccooll{
  bottom: 0;
}

.whl-col > div {
  width: 100%;
  //height: 470px;
}

.count-base,
.count-resource,
.count-share,
.count-topic {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  box-sizing: border-box;
  text-align: center;
}

/*单个图表容器*/
.count-base {
  background: url('@/assets/img/left-top3.jpg') center no-repeat;
  background-size: cover;
}

/*标题*/
.com-count-title {
  color: #1bb4f9;
  font-size: 18px;
  padding: 0;
}

/*显示区域*/
.com-screen-content {
  width: 100%;
  height: auto;
  //height: 400px;
}


/*四角*/
.left-top,
.right-top,
.left-bottom,
.right-bottom {
  position: absolute;
  width: 13px;
  height: 13px;
}

.left-top,
.right-top {
  top: 0;
  border-top: solid 2px #045291;
}

.left-bottom,
.right-bottom {
  bottom: 0;
  border-bottom: solid 2px #045291;
}

.left-top {
  left: 0;
  border-left: solid 2px #045291;
}

.right-top {
  right: 0;
  border-right: solid 2px #045291;
}

.left-bottom {
  left: 0;
  border-left: solid 2px #045291;
}

.right-bottom {
  right: 0;
  border-right: solid 2px #045291;
}




</style>